<div class="container">
  <div class="row mb-5">
    <div class="col-lg">
      <h2 class="d-none d-sm-block h3 mb-3 text-center" i18n>FIRE</h2>
      <div>
        <h4 class="align-items-center d-flex mb-3">
          <span i18n>Calculator</span>
          @if (user?.subscription?.type === 'Basic') {
            <gf-premium-indicator class="ml-1" />
          }
        </h4>
        <gf-fire-calculator
          [annualInterestRate]="user?.settings?.annualInterestRate"
          [colorScheme]="user?.settings?.colorScheme"
          [currency]="user?.settings?.baseCurrency"
          [deviceType]="deviceType"
          [fireWealth]="fireWealth?.today.valueInBaseCurrency"
          [hasPermissionToUpdateUserSettings]="
            !hasImpersonationId && hasPermissionToUpdateUserSettings
          "
          [locale]="user?.settings?.locale"
          [ngStyle]="{
            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
            'pointer-events':
              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
          }"
          [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
          [retirementDate]="user?.settings?.retirementDate"
          [savingsRate]="user?.settings?.savingsRate"
          (annualInterestRateChanged)="onAnnualInterestRateChange($event)"
          (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
          (retirementDateChanged)="onRetirementDateChange($event)"
          (savingsRateChanged)="onSavingsRateChange($event)"
        />
      </div>
    </div>
  </div>
  <div>
    <h4 class="align-items-center d-flex">
      <span i18n>Sustainable retirement income</span>
      @if (user?.subscription?.type === 'Basic') {
        <gf-premium-indicator class="ml-1" />
      }
    </h4>
    @if (isLoading) {
      <div>
        <ngx-skeleton-loader
          animation="pulse"
          class="my-1"
          [theme]="{
            height: '1rem',
            width: '100%'
          }"
        />
        <ngx-skeleton-loader
          animation="pulse"
          [theme]="{
            height: '1rem',
            width: '10rem'
          }"
        />
      </div>
    } @else {
      <div [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }">
        <ng-container i18n
          >If you retire today, you would be able to withdraw</ng-container
        >
        <ng-container>&nbsp;</ng-container>
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="withdrawalRatePerYear?.toNumber()"
          />
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n>per year</ng-container></span
        >
        <ng-container>&nbsp;</ng-container>
        <ng-container i18n>or</ng-container>
        <ng-container>&nbsp;</ng-container>
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="withdrawalRatePerMonth?.toNumber()"
          />
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n>per month</ng-container></span
        ><ng-container i18n>,</ng-container>
        <ng-container>&nbsp;</ng-container>
        <ng-container i18n>based on your total assets of</ng-container>
        <ng-container>&nbsp;</ng-container>
        <span class="font-weight-bold"
          ><gf-value
            class="d-inline-block"
            [isCurrency]="true"
            [locale]="user?.settings?.locale"
            [unit]="user?.settings?.baseCurrency"
            [value]="fireWealth?.today.valueInBaseCurrency"
          />
        </span>
        <ng-container>&nbsp;</ng-container>
        <ng-container i18n>and a safe withdrawal rate (SWR) of</ng-container>
        @if (
          !hasImpersonationId &&
          hasPermissionToUpdateUserSettings &&
          user?.settings?.isExperimentalFeatures
        ) {
          <select
            class="border-0 cursor-pointer d-inline-block font-weight-bold safe-withdrawal-rate-select"
            [formControl]="safeWithdrawalRateControl"
          >
            @for (rate of safeWithdrawalRateOptions; track rate) {
              <option [value]="rate">
                {{ rate | percent: '1.1-1' }}
              </option>
            }</select
          >.
        } @else {
          <ng-container>&nbsp;</ng-container>
          <span class="font-weight-bold"
            ><gf-value
              class="d-inline-block"
              [isPercent]="true"
              [locale]="user?.settings?.locale"
              [precision]="1"
              [value]="user?.settings?.safeWithdrawalRate" /></span
          >.
        }
      </div>
    }
  </div>
</div>
